<template>
    <div class="role">
        <Tabs type="card" v-model:value="currentTab" @on-click="choose">
            <TabPane icon="ios-list-box-outline" label="角色列表" name="roleList">
                <div class="roleList">
                    <!--查询条件-->
                    <div class="header">

                    </div>
                    <!--表格-->
                    <div class="body">
                        <Table :columns="roleListData"
                               :data="roleList"
                               show-header
                               draggable
                               border
                               size="small"
                               @on-drag-drop="dragOrder"
                               @on-selection-change="selectMany">

                            <!--角色名称-->
                            <template slot-scope="{ row, index }" slot="roleName">
                                <span>{{row.roleName}}</span>
                            </template>

                            <!--角色描述-->
                            <template slot-scope="{ row, index }" slot="roleDesc">
                                <span>{{row.roleDesc}}</span>
                            </template>

                            <!--分配权限-->
                            <template slot-scope="{ row, index }" slot="auth">
                                <Button size="small" type="success" @click="auth(row, index)">授权</Button>
                            </template>

                            <!--操作-->
                            <template slot-scope="{ row, index }" slot="handle">
                                <Button size="small" type="info" @click="edit(row, index)">编辑</Button>
                            </template>

                            <!--排序-->
                            <template slot-scope="{ row, index }" slot="order">
                                <Button size="small" type="warning" @click="order(row, index)">排序</Button>
                            </template>

                            <!--删除-->
                            <template slot-scope="{ row, index }" slot="del">
                                <Button size="small" type="error" @click="del(row, index)">删除</Button>
                            </template>
                        </Table>
                    </div>
                </div>
            </TabPane>
            <TabPane icon="ios-add-circle-outline" label="新增角色" name="roleAdd">
                <Form :model="roleInfo" :label-width="100">
                    <FormItem label="角色名称">
                        <Tooltip content="1-10个字符" placement="right" theme="light">
                            <Input prefix="ios-card-outline"
                                   v-model="roleInfo.roleName"
                                   placeholder="角色名称"
                                   style="width: 500px"
                                   clearable/>
                        </Tooltip>
                    </FormItem>

                    <FormItem label="角色描述">
                        <Tooltip content="1-100个字符" placement="right" theme="light">
                            <Input prefix="ios-calendar-outline"
                                   v-model="roleInfo.roleDesc"
                                   placeholder="角色描述"
                                   style="width: 500px"
                                   clearable/>
                        </Tooltip>
                    </FormItem>

                    <FormItem>
                        <Button type="primary" v-if="addRoleBtnFlag" @click="insertRole">新增角色</Button>
                        <Button v-if="!addRoleBtnFlag">新增角色</Button>
                    </FormItem>
                </Form>
            </TabPane>
            <TabPane icon="ios-bowtie-outline" label="默认角色" name="roleDef">

                <div style="color: red;margin: 10px">默认角色:在用户创建时会默认分配的角色</div>

                <CheckboxGroup v-model="defList">
                    <div v-for="(obj,i) in roleList">
                        <Checkbox :label="obj.roleId">
                            <div class="roleName">
                                {{obj.roleName}}
                            </div>
                            <div class="roleDesc">
                                {{obj.roleDesc}}
                            </div>
                        </Checkbox>
                    </div>

                </CheckboxGroup>
            </TabPane>
        </Tabs>


        <!--角色编辑信息-->
        <Modal v-model="roleDetailsFlag"
               draggable
               @on-ok="okUpdateRole"
               width="500">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">角色信息</span>
            </p>

            <Form :model="roleInfo" :label-width="100">
                <FormItem label="角色名称">
                    <Tooltip content="1-10个字符" placement="right" theme="light">
                        <Input prefix="ios-card-outline"
                               v-model="roleInfo.roleName"
                               style="width: 300px"/>
                    </Tooltip>
                </FormItem>

                <FormItem label="角色描述">
                    <Tooltip content="1-100个字符" placement="right" theme="light">
                        <Input prefix="ios-calendar-outline"
                               v-model="roleInfo.roleDesc"
                               style="width: 300px"/>
                    </Tooltip>
                </FormItem>
            </Form>
        </Modal>

        <!--角色授权信息-->
        <Modal v-model="roleAuthFlag"
               draggable
               @on-ok="okUpdateRoleMenuIds"
               width="400">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">角色授权</span>
            </p>

            <Tree :data="menu" show-checkbox ref="tree"></Tree>
        </Modal>

        <!--删除询问面板-->
        <Modal v-model="roleDelFlag"
               draggable
               @on-ok="okRoleDel">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">角色删除</span>
            </p>

            <p>
                确定删除
                <span style="color: #FF0000;font-size: 16px">{{roleInfo.roleName}}</span>
                角色吗?
            </p>
            <span style="color: #FF0000;font-size: 14px">【慎重删除，删除无法找回】</span>
        </Modal>

        <!--排序面板-->
        <Modal v-model="orderFlag"
               draggable
               @on-ok="okRoleOrder">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">角色排序</span>
            </p>

            将该角色
            <span style="color: #FF0000;font-size: 16px;margin: 0px 8px">{{roleInfo.roleName}} </span>
            放置序号为
            <InputNumber :max="roleList.length"
                         :min="1"
                         style="width: 100px;margin: 0px 8px"
                         v-model="tmpIndex"></InputNumber>
            的角色前
        </Modal>
    </div>
</template>

<script>
    import {checkIsNull} from "@/tools/Null";

    export default {
        name: "",
        components: {},
        data() {
            return {
                currentTab: "roleList",
                //角色列表
                roleList: [],
                defList:[],
                //
                roleListData: [
                    {type: 'selection', width: 60, align: 'center'},
                    {title: "序号", type: 'index', resizable: true, align: "center", width: 100},
                    {
                        title: "角色名称",
                        slot: 'roleName',
                        key: 'roleName',
                        resizable: true,
                        align: "center",
                        width: 180
                    },
                    {title: "角色描述", slot: 'roleDesc', key: 'roleDesc', resizable: true, align: "left"},
                    {title: "权限", slot: 'auth', resizable: true, align: "center", width: 120},
                    {title: "编辑", slot: 'handle', resizable: true, align: "center", width: 120},
                    {title: "排序", slot: 'order', resizable: true, align: "center", width: 120},
                    {title: "删除", slot: 'del', resizable: true, align: "center", width: 120}
                ],
                roleInfo: {
                    roleId: "",
                    roleName: "",
                    roleDesc: "",
                    showOrder: "",
                    status: "",
                    def: ""
                },
                //新增角色幂等
                addRoleBtnFlag: true,
                row: {},
                index: 0,
                //角色详细信息
                roleDetailsFlag: false,
                //删除询问
                roleDelFlag: false,
                //角色授权
                roleAuthFlag: false,
                //排序面板
                orderFlag: false,
                //放置索引
                tmpIndex: 1,
                //菜单
                menu: [],
            }
        },
        methods: {
            //选择面板
            choose: function (name) {
                if (name == "roleAdd") {
                    this.selectRoleList()
                    this.roleInfo = {
                        roleId: "",
                        roleName: "",
                        roleDesc: "",
                        showOrder: "",
                        status: "",
                        def: ""
                    }
                }
            },
            //选择多条
            selectMany: function () {

            },
            //新增前校验
            checkRole: function () {
                let flag = true
                //校验角色名
                let b = checkIsNull(this.roleInfo.roleName);
                if (b) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        content: '角色名不能为空'
                    });
                    flag = false
                } else {
                    if (this.roleInfo.roleName.length > 10) {
                        this.$Message.error({
                            background: true,
                            closable: true,
                            content: '角色名不符合规范'
                        });
                        flag = false
                    }
                }
                //校验角色描述
                let b1 = checkIsNull(this.roleInfo.roleDesc);
                if (!b1) {
                    if (this.roleInfo.roleName.length > 100) {
                        this.$Message.error({
                            background: true,
                            closable: true,
                            content: '角色描述不符合规范'
                        });
                        flag = false
                    }
                }
                return flag
            },
            //新增角色
            insertRole: function () {
                this.$Message.destroy();
                let b = this.checkRole();
                if (!b) {
                    return
                }
                let data = {
                    roleName: this.roleInfo.roleName,
                    roleDesc: this.roleInfo.roleDesc
                }
                this.axios.post(`/login/sysRole/sysRole`, data)
                    .then((data) => {
                        //跳转用户列表
                        this.currentTab = "roleList"
                        this.selectRoleList();
                    })
            },
            //查询角色列表
            selectRoleList: function () {
                this.axios.get(`/login/sysRole/sysRoleList`)
                    .then((data) => {
                        this.roleList = data.data
                        for (let i = 0; i < this.roleList.length; i++) {
                            if(this.roleList[i].def==1){
                                this.defList.push(this.roleList[i].roleId)
                            }
                        }
                    })
            },
            //授权
            auth: function (row, index) {
                this.roleInfo = row
                this.index = index
                this.roleAuthFlag = true

                this.axios.get(`/login/sysMenu/sysMenu/roleId/${this.roleInfo.roleId}`)
                    .then((data) => {
                        this.menu = data.data
                    })
            },
            //编辑
            edit: function (row, index) {
                this.roleInfo = row
                this.index = index
                this.roleDetailsFlag = true
            },
            //确定更新
            okUpdateRole: function () {
                let b = this.checkRole();
                if (!b) {
                    return
                }
                let data = {
                    roleName: this.roleInfo.roleName,
                    roleDesc: this.roleInfo.roleDesc
                }
                this.axios.put(`/login/sysRole/sysRole/${this.roleInfo.roleId}`, data)
                    .then((data) => {
                        this.$Message.info({
                            background: true,
                            closable: true,
                            duration: 1,
                            content: '角色更新成功'
                        });
                        this.selectRoleList();
                        this.roleInfo.roleId = ""
                        this.roleInfo.roleName = ""
                        this.roleInfo.roleDesc = ""
                    })
            },
            //授权
            okUpdateRoleMenuIds: function () {
                let nodes = this.$refs.tree.getCheckedAndIndeterminateNodes();
                let menuIds = [];
                for (let i = 0; i < nodes.length; i++) {
                    menuIds.push(nodes[i].menuId)
                }
                console.log(menuIds);
                this.axios.put(`/login/sysMenu/sysMenu/roleId/${this.roleInfo.roleId}`, menuIds)
                    .then((data) => {
                        this.$Message.success({
                            background: true,
                            closable: true,
                            duration: 1,
                            content: '角色授权成功'
                        });
                    })
            },
            //排序
            order: function (row, index) {
                this.orderFlag = true
                this.roleInfo = row
                this.index = index
            },
            //排序
            okRoleOrder: function () {
                let number = this.tmpIndex - this.index;
                if (number == 1 || number == 2) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '请勿将本条数据原地移动'
                    });
                    return
                }
                if (this.tmpIndex > this.index) {
                    this.tmpIndex--
                }
                let tmpRoleList = this.roleList;
                tmpRoleList.delete(this.index)
                tmpRoleList.insert(this.tmpIndex, this.roleInfo)


                let ids = []
                for (let i = 0; i < this.roleList.length; i++) {
                    ids.push(this.roleList[i].roleId)
                }
                this.axios.put(`/login/sysRole/order`, ids)
                    .then((data) => {
                        this.$Message.warning({
                            background: true,
                            closable: true,
                            duration: 2,
                            content: '角色排序成功'
                        });
                    })
            },
            //拖拽排序
            dragOrder: function (fromIndex, toIndex) {
                this.roleInfo = this.roleList[fromIndex];
                this.index = fromIndex;
                this.tmpIndex = toIndex + 1;
                this.okRoleOrder()
            },
            //删除
            del: function (row, index) {
                this.roleInfo = row
                this.roleDelFlag = true
            },
            //删除
            okRoleDel: function () {
                this.axios.delete(`/login/sysRole/sysRole/${this.roleInfo.roleId}`)
                    .then((data) => {
                        this.$Message.error({
                            background: true,
                            closable: true,
                            duration: 1,
                            content: '角色删除成功'
                        });
                        this.selectRoleList();
                        this.roleInfo.roleId = ""
                        this.roleInfo.roleName = ""
                        this.roleInfo.roleDesc = ""
                    })
            }
        },
        mounted() {
            this.selectRoleList()
        }
    }
</script>

<style scoped>

</style>